<template>
  <view class="user">
    <!-- 上方显示用户信息的区域 -->
    <view class="userinfo">
      <!-- 信息区域 -->
      <view class="top">
        <view class="avator">
          <uni-icons type="person-filled" size="30" 
            :color="logColor"></uni-icons>
        </view>
        <view class="uname">点击登录</view>
      </view>
    </view>
    <!-- 下方显示的四项用户操作项 -->
    <view class="list">
      <uni-list>
        <uni-list-item v-for="item,index in manageList" 
          :title="item.name" :show-extra-icon="true"
          :extra-icon="item.icon" clickable link @tap="navto(index)"></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config";
	const searchKey = ref("")
	
	const manageList = ref([{
	  name: '景点收藏',
	  icon: {
	    color: '#56c48b',
	    size: '22',
	    type: 'shop'
	  }
	}, {
	  name: '电影收藏',
	  icon: {
	    color: '#ff6700',
	    size: '22',
	    type: 'location-filled'
	  }
	}, {
	  name: '我的收藏',
	  icon: {
	    color: '#0225ff',
	    size: '22',
	    type: 'star'
	  }
	}, {
	  name: '设置',
	  icon: {
	    color: '#0081b9',
	    size: '22',
	    type: 'gear'
	  }
	}])
</script>

<style scoped lang="scss">
	.user{
		.userinfo{
			overflow: hidden;
			width: 100%;
			height: 200px;
			background-color: papayawhip;
			
			.top{
				margin: 50px 0 0 50px;
				display: flex;
				align-items: center;
				.avator{
					width: 40px;
					height: 40px;
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
					line-height: 40px;
				}
			}
		}
	}

</style>
